import React from 'react';
// 把 `BrowserRouter` 替换成 `Router + history` 方式
import { Router, Redirect, Route, Switch } from 'react-router-dom';
import history from './utils/history';
import MyLoading from './components/Loading';
// import { hasToken } from './utils/storage';
import AuthRoute from './components/AuthRoute';
import { KeepAlive } from './components/KeepAlive.tsx';
// import Article from './pages/Article';
// import Chat from './pages/Profile/Chat';
// import ProfileEdit from './pages/Profile/Edit';
// import ProfileFeedback from './pages/Profile/Feedback';
// import Search from './pages/Search';
// import Result from './pages/Search/Result';

// 路由懒加载 导入方式也要换一下
const Login = React.lazy(() => import('@/pages/Login'));
const Layout = React.lazy(() => import('@/pages/Layout'));
const NotFound = React.lazy(() => import('@/pages/NotFound'));
const Article = React.lazy(() => import('@/pages/Article'));
const Chat = React.lazy(() => import('@/pages/Profile/Chat'));
const ProfileEdit = React.lazy(() => import('@/pages/Profile/Edit'));
const ProfileFeedback = React.lazy(() => import('@/pages/Profile/Feedback'));
const Search = React.lazy(() => import('@/pages/Search'));
const Result = React.lazy(() => import('@/pages/Search/Result'));
const Test = React.lazy(() => import('@/pages/Test'));

export default function App() {
  return (
    <Router history={history}>
      {/* 路由懒加载  fallback是加载动画*/}
      <React.Suspense fallback={<MyLoading></MyLoading>}>
        {/* 1. 使用KeepAlive替换Route匹配 */}
        {/* 2. 挪到Switch组件之外 */}
        <KeepAlive activePath="/layout" component={Layout} />
        <Switch>
          <Redirect from="/" exact to="/layout/home"></Redirect>
          <Route path="/layout" component={Layout} />
          <Route path="/login" component={Login} />
          {/* path*或者不写都可以 */}

          {/* 跳转时要路由精准匹配 */}
          <Route path="/search" exact component={Search} />
          <Route path="/search/result" component={Result} />
          <Route path="/article/:id" component={Article} />
          {/* <Route path="/profile/edit" component={ProfileEdit} /> */}
          {/* <Route path="/profile/feedback" component={ProfileFeedback} />
          <Route path="/profile/chat" component={Chat} /> */}
          {/* <Route
            path="/profile/edit"
            // 路由鉴权
            render={(props: any) => {
              console.log('props  ----->  ', props);
              if (hasToken()) {
                // 记得透传props属性
                return <ProfileEdit {...props} />;
              }
              return <Redirect to="/login"></Redirect>;
            }}
          /> */}
          <AuthRoute path="/profile/edit" component={ProfileEdit} />
          <AuthRoute path="/profile/feedback" component={ProfileFeedback} />
          <AuthRoute path="/profile/chat" component={Chat} />
          <Route path="/test" component={Test} />
          {/* <Route path="*" component={NotFound} /> */}
          <Route
            path="*"
            render={(props) => {
              const isLayout = props.location.pathname.startsWith('/layout');
              if (isLayout) return null;
              return <NotFound />;
            }}
          />
        </Switch>
      </React.Suspense>
    </Router>
  );
}
